<template>
    <div v-show="prodQuery">
        <i-switch size="large" :true-color="this.trueColor" :false-color="this.falseColor" :before-change="handleBeforeChange" :value="open">
            <span slot="open">{{this.job}}</span>
            <span slot="close">{{this.not}}</span>
        </i-switch>
        <Modal :title="changeRemarksTitle" v-model="changeRemarksModalVisible" :mask-closable='false' :width="450" :styles="{top: '90px'}">
            <Row>
                <Form ref="changeRemarksForm" :model="changeRemarksForm" style="margin: 20px" :rules="memberFormValidate">
                    <FormItem label="离岗原因" prop="changeRemarks">
                        <Input v-model="changeRemarksForm.changeRemarks" type="textarea" :rows="3" style="width: 300px;"/>
                    </FormItem>
                </Form>
            </Row>
            <div slot="footer">
                <Button type="text" @click="cancelLeavePost">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="updateLeavePost">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {updateUserCollocation,getUserJobButton} from  "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        name: "jobButton",
        data () {
            return {
                prodQuery: false,
                job:"",
                not:"",
                trueColor:"",
                falseColor:"",
                memberForm: {
                    postStatus:"",
                    loginName:"",
                    changeRemarks:""
                },
                changeRemarksTitle:"离岗编辑",
                changeRemarksModalVisible:false,
                memberFormValidate: {
                    changeRemarks: [
                        { required: true, message: '请输入离岗原因', trigger: 'change' }
                    ],
                },
                changeRemarksForm: {
                    changeRemarks:"",
                },
                status:"",
                loading: true,
                submitLoading:false,
                open:false,
            }
        },
        methods: {
            init(){
                this.getUserJobButton();
            },
            getUserJobButton(){
                getUserJobButton().then(res=>{
                    if(res.code === "0000"){
                        if(res.data !== undefined){
                            this.prodQuery = true;
                            if(res.data.postStatus === "0"){
                                this.not = "离岗";
                                this.job = "上岗";
                                this.trueColor = "#13ce66";
                                this.falseColor= "#ff4949";
                                this.status = "0";
                            }else{
                                this.not = "上岗";
                                this.job = "离岗";
                                this.trueColor = "#ff4949";
                                this.falseColor= "#13ce66";
                                this.status = "1";
                            }
                            this.memberForm.postStatus = res.data.postStatus;
                            this.memberForm.loginName = res.data.loginName;
                        }
                    }
                })
            },
            update(){
                updateUserCollocation(this.memberForm).then(res=>{
                    if(res.code === "0000"){
                        this.$Message.success("操作成功");
                        if(this.status === "0"&&this.open===false){
                            this.open = true;
                            this.status = "1";
                        }else if(this.status === "0"&&this.open===true){
                            this.open = false;
                            this.status = "1";
                        }
                    }
                });
            },
            //离岗提交
            updateLeavePost(){
                this.$refs.changeRemarksForm.validate(valid => {
                    if(valid){
                        this.memberForm.changeRemarks = this.changeRemarksForm.changeRemarks;
                        updateUserCollocation(this.memberForm).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.changeRemarksModalVisible = false;
                                this.changeRemarksForm.changeRemarks = "";
                                if(this.status === "1"&&this.open===false){
                                    this.open = true;
                                    this.status = "0";
                                }else if(this.status === "1"&&this.open===true){
                                    this.open = false;
                                    this.status = "0";
                                }
                            }
                        })
                    }
                })
            },
            //离岗返回
            cancelLeavePost(){
                this.changeRemarksModalVisible = false;
            },
            handleBeforeChange(){
                return new Promise((resolve) => {
                    if(this.status === "0"){
                        this.memberForm.postStatus = "1";
                        this.update();
                    }else{
                        this.memberForm.postStatus = "0";
                        this.changeRemarksModalVisible = true;
                    }
                });
            },
        },
        //初始化
        mounted() {
            this.init();
        }
    }
</script>
